<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
<script src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
<style type="text/css">
body{
	padding: 10px
}
.res{
	display: inline-block;
	margin : 0px 5px;
	width: 60px;
	height: 20px;
	line-height:20px;
}
input {
	color:blue;
	text-align: center;
	font-size: 1.2em;
	font-weight : bold;
	border-top:none;
	border-left:none;
	border-right:none;
	border-bottom : 1px solid #555;
	background: inherit;
	width:70%
}
.qlist dl{
	padding: 5px;
	border: 1px solid #ccc;
	background: #eee;
	border-radius: 5px;
}
.qlist dl:hover{
	border-color: blue;
}
.qlist{
	overflow: auto; 
}
</style>
<script type="text/javascript">
function Q(content, expect, validate){
	this.content = content;
	this.validate = validate;
	if(expect != undefined) this.expect = expect;
	this.result = false;
}

var qs = [
	new Q("var reg = /\\w{3}\\d{4}/;<br>//输入字符串匹配上面的正则表达式<br>var str = '答题线'; <br>reg.test(str); // 要求返回 ",true),
	new Q("var reg = /[A-Z]{3}\\d{4}/;<br>//输入字符串匹配上面的正则表达式<br>var str = '答题线'; <br>reg.test(str); // 要求返回 ",true),
	new Q("var reg = /[XYZ]{3}\\d{4}test/;<br>//输入字符串匹配上面的正则表达式<br>var str = '答题线'; <br>reg.test(str); // 要求返回 ",true),
	new Q("var reg = /\\d{2}\\+\\d{3}=\\d{4}/;<br>//输入字符串匹配上面的正则表达式<br>var str = '答题线'; <br>reg.test(str); // 要求返回 ",true),
	new Q("var reg = /[A-z]\\w+=\\d+/;<br>//输入字符串匹配上面的正则表达式<br>var str = '答题线'; <br>reg.test(str); // 要求返回 ",true),
	new Q("var reg = /var\\s+[A-z]\\w+\\s*=\\s*\\d+/;<br>//输入字符串匹配上面的正则表达式<br>var str = '答题线'; <br>reg.test(str); // 要求返回 ",true),

	new Q("var data = '是balabala小魔仙不是labalaba小魔仙';// 参考 '分组' 实现筛选<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
		['balabala小魔仙'],{expr:/\(/,msg:"必须包含分组语法"}),
	new Q("var data = '131,133,136,153,151,155,170,171,177,180,181,183';// 参考 '分组' 实现筛选<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
		[131,133,136,153,155],{expr:/\(/,msg:"必须包含分组语法"}),
	new Q("var data = '131,133,136,153,151,155,170,171,177,180,181,183';// 参考 '分组' 实现筛选<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
		[131,133,136,153,155,170,171,177],{expr:/\(/,msg:"必须包含分组语法"}),
	new Q("var data = '131,133,136,153,151,170,171,177,180,181,183';// 参考 '分组' 实现筛选<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
		[133,153],{expr:/\(/,msg:"必须包含分组语法"}),
	new Q("var data = '131,133,136,153,151,170,171,177,180,181,183';// 参考 '分组' 实现筛选<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
		[151,171],{expr:/\(/,msg:"必须包含分组语法"}),
		
	new Q("var data = '13166668888';// 参考 '反向引用' 实现替换<br>var ret = data.replace(答题线); <br>ret == '131-6666-8888'; // 要求返回 ", 
		true,{expr:/\(/,msg:"必须包含反向引用语法"}),
	new Q("var data = '43040319880203303';// 参考 '反向引用' 实现替换<br>data.replace(答题线); // 要求返回 ", 
		'1988年02月03日',{expr:/\(/,msg:"必须包含反向引用语法"}),
	new Q("var data = '詹姆斯-邦德';// 参考 '反向引用' 实现替换<br>data.replace(答题线); // 要求返回 ", 
		'姓:邦德,名:詹姆斯',{expr:/\(/,msg:"必须包含反向引用语法"}),
			
	new Q("var data = 'start.bat,up.exe,down.exe,left.sh,right.sh,end.bat';// 参考 '前瞻' 获取所有的exe文件的前缀名<br>data.match(答题线).toString(); // 要求返回 ", 
		['up','down'],{expr:/\?/,msg:"必须包含前瞻语法"}),
	new Q("var data = 'start.bat,up.exe,down.exe,left.sh,right.sh,end.bat';// 参考 '前瞻' 获取所有的sh和exe文件的前缀名<br>data.match(答题线).toString(); // 要求返回 ", 
		['up','down','left','right'],{expr:/\?/,msg:"必须包含前瞻语法"}),
	new Q("var data = 'start.bat,up.exe,down.exe,left.sh,right.sh,end.bat';// 参考 '前瞻' 获取所有的bat和sh文件的后缀名<br>data.match(答题线).toString(); // 要求返回 ", 
		['start','left','right','end'],{expr:/\?/,msg:"必须包含前瞻语法"}),
		
	new Q("var data = 'test:0,root:12,admin:345,yc:7890';<br>//参考 '预定义类,量词,边界词' 定义正则表达式<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
		['test','root'],{expr:/[\\-]/,msg:"参考 '预定义类,量词,边界词' 定义正则表达式"}),
	new Q("var data = 'test:0,root:12,admin:345,yc:7890';<br>//参考 '预定义类,量词,边界词' 定义正则表达式<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
		['test','root',7890],{expr:/[\\-]/,msg:"参考 '预定义类,量词,边界词' 定义正则表达式"}),
	new Q("var data = 'test:0,root:12,admin:345,yc:7890';<br>//参考 '预定义类,量词,边界词' 定义正则表达式<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
		['12','yc'],{expr:/[\\-]/,msg:"参考 '预定义类,量词,边界词' 定义正则表达式"}),
	];

</script>
</head>
<body>
	<div id="main">
		<fieldset class="alist">
			<legend>正则表达式练习题3 答题结果</legend>
			<span class="res" v-for="q,i in questions">
				题{{i+1}}: <b style="color: red">{{q.result?'对':''}}</b>
			</span>
		</fieldset>
		<fieldset>
			<legend>题目: 请按照要求再横线处填写代码, 浏览器控制台会打印每道题的返回结果</legend>
			<div class="qlist">
			<dl v-for="q,i in questions">
				<dt>第{{i+1}}题 <b style="color: red">{{q.result?'对':''}}</b></dt>
				<dd>
					<span v-html="prefix( q.content )"></span>
					<input @change="test( q, $event )">
					<span v-html="suffix( q.content )"></span>
					<span v-html="q.expect != undefined ? q.expect : ''" :style="showResult(q)"></span>
				</dd>
			</dl>
			</div>
		</fieldset>
	</div>
	<script type="text/javascript">
		new Vue({
			el : "#main",
			data : {
				questions : qs
			},
			methods : {
				test(q,event){
					var value = event.srcElement.value;
					if(q.validate){
						if( ! q.validate.expr.test(value)) {
							alert(q.validate.msg);
							q.result = false;
							return;
						}
					}
					var script = q.content.replace(/<br>/gi,'\r\n');
					script = script.replace('答题线',value);
					try{
						console.info("====测试开始====");
						console.info(script);
						var ret = eval(script);
						console.info("====测试结果====");
						console.info(ret);
						console.info("====测试结束====");
						q.result = q.expect != undefined ? ret == q.expect : true;
					}catch(e){
						console.error(e);
						q.result = false;
					}
				},
				prefix(text){
					return text.substring(0, text.indexOf('答题线'));
				},
				suffix(text){
					return text.substring(text.indexOf('答题线') + 3);
				},
				showResult(q){
					return {color:q.result?'green':'inherit',
							fontWeight:q.result?'bold':'inherit'}
				}
			},
			
		});
	</script>
</body>
</html>